<script>
/**
 * @name v-link
 * @desc 封装的'a’标签,模仿'router-link’
 * @param {String} text 显示的文本
 * @param {String|Object} to 跳转的路径;如果类型为'object’,必须有'name’和'query’;'query’为url参数信息
 */

const prefix = '/pages/'
const suffix = '/main'

export default {
  name: 'v-link',
  props: ['text', 'to'],
  computed: {
    href() {
      const type = (typeof this.to).toLowerCase()
      if (type === 'string') {
        return `${prefix}${this.to}${suffix}`
      } else if (type === 'object') {
        if (this.to.name && this.to.query) {
          let str = '?'
          for (const [k, v] of Object.entries(this.to.query)) {
            str += `${k}=${v}&`
          }
          str = str.slice(0, -1)
          return `${prefix}${this.to.name}${suffix}${str}`
        } else if (this.to.name) {
          return `${prefix}${this.to.name}${suffix}`
        }
      } else {
        return ''
      }
    }
  }
}
</script>

<template>
  <navigator class="v-link" :url="href">{{text}}</navigator>
</template>

<style lang="scss" scoped>
.v-link {
  text-decoration: none;
  color: $font-color;
}
</style>
